
<!--个人信息页面。要注意这个页面的路由设置，这个页面不在侧边导航栏出现，只能通过用户的下拉列表进入
    另外，页面右上角也没有使用用户头像，仅显示用户名。修改此处，应前往src/layout/components/Navbar.vue-->

    <template>
        <div>
          <el-card style="width: 600px; height: 400px">
            <!--    展示个人信息-->
            <h1>
              个人信息
            </h1>
            <div class="info">
              <br>
              <span style="font-weight: bold">用户名：</span>
              <span>{{userName}}</span>
              <br><br>
              <span style="font-weight: bold">姓名：</span>
              <span>{{name}}</span>
              <br><br>
              <span style="font-weight: bold">角色：</span>
              <span>{{role}}</span>
              <br>
      
              <el-button type="primary" style=" margin-top: 40px" @click="openEditUI">修改密码</el-button>
            </div>
      
          </el-card>
      
      <!--    修改密码弹窗-->
          <el-dialog :visible.sync="dialogFormVisible" title="修改密码" align-center @close="closeEditUI" style="width: 800px">
            <el-form :model="form">
              <el-form-item label="旧密码" label-width="100px">
                <el-input v-model="form.oldPwd" autocomplete="off" placeholder="请输入旧密码"/>
              </el-form-item>
              <el-form-item label="新密码" label-width="100px">
                <el-input v-model="form.newPwd" autocomplete="off" placeholder="请输入新密码"/>
              </el-form-item>
              <el-form-item label="确认密码" label-width="100px">
                <el-input v-model="form.confirmPwd" autocomplete="off" placeholder="请确认新密码"/>
              </el-form-item>
            </el-form>
      
            <template #footer>
                <span  class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false" >
                  确定
                </el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
              </span>
            </template>
      
          </el-dialog>
      
      <!--    修改成功提示弹窗，弹窗的出现与否由showSuccess控制-->
          <el-dialog :visible.sync="showSuccess" style="width: 800px;">
            <h1>
              修改成功
            </h1>
      
            <template #footer>
                <span  class="dialog-footer">
                <el-button type="primary" @click="showSuccess = false" >确定</el-button>
              </span>
            </template>
      
          </el-dialog>
      
      
        </div>
      </template>
      
      <script>
      export default {
        name: "profile",
        data() {
          return{
            userName: '用户名',
            name: '姓名',
            role: '角色',
      
            dialogFormVisible: false,
      
            showSuccess: false,
            showFail: false,
      
            form: {
              oldPwd: '',
              newPwd: '',
              confirmPwd: '',
            },
          }
        },
        methods: {
          openEditUI() {
            this.dialogFormVisible = true;
          },
          closeEditUI() {
            this.showSuccess = true;
            this.dialogFormVisible = false;
            this.form = {
              oldPwd: '',
              newPwd: '',
              confirmPwd: '',
            };
          },
        }
      }
      </script>
      
      <style scoped>
        .info {
          margin-left: 80px;
          padding: 50px;
          padding-left: 80px;
          font-size: large;
        }
      </style>
      